<?php get_header(); ?>

<script>
  $(document).ready(function(){
    var w_per_page = 715;
    var n_page = $('.slideshow .page').length;
    var now = 1;
    
    $('.slideshow .pic-container').width(w_per_page * n_page+'px');
    $('p.page_numbers span').html("1/"+n_page);
    
    $('.slideshow .next').click(function(){
      if(now < n_page){
        // change page numbers
        now++;
        $('p.page_numbers span').html(now+"/"+n_page);
        
        $('.slideshow .pic-container').animate({
          left: '-='+w_per_page
        });
      }
    });
    
    $('.slideshow .prev').click(function(){
      if(now > 1){
        // change page numbers
        now--;
        $('p.page_numbers span').html(now+"/"+n_page);
        
        $('.slideshow .pic-container').animate({
          left: '+='+w_per_page
        });
      }
    });
    
    $('.slideshow a').hover(function(){
      var desc = $(this).find('img').attr('alt');
      $('.caption').html(desc);
    }, function(){
      $('.caption').html('');
    });
    
    $('#jquery-lightbox img').hover(function(){
      var desc = $(this).find('img').attr('alt');
      $('.caption').html(desc);
      alert('asd');
    }, function(){
      $('.caption').html('');
    });
    
    $('.slideshow a').lightBox({
      imageLoading: '<?php bloginfo('template_url') ?>/images/lightbox-ico-loading.gif'
    });
  });
</script>

<div class="wrapper">
  <div id="gallery">
    <div class="header-content">
      <div class="slogan">
        <img src="<?php bloginfo('template_url'); ?>/images/logo.png" />
        <h3><?php bloginfo('name'); ?></h3>
        <p><?php bloginfo('description'); ?></p>
      </div>
      
      <div class="menu">
        <a href="<?php bloginfo('url'); ?>#home" class="fr">HOME</a>
        <ul>
          <li><a href="<?php bloginfo('url'); ?>/category/news">NEWS</a></li>
          <li><a href="<?php bloginfo('url'); ?>#about_us">ABOUT US</a></li>
          <li><a href="<?php bloginfo('url'); ?>#heavy_machine">HEAVY MACHINE</a></li>
          <li><a href="<?php bloginfo('url'); ?>#projects">PROJECTS</a></li>
          <li class="active"><a href="<?php bloginfo('url'); ?>/category/gallery">GALLERY</a></li>
          <li><a href="<?php bloginfo('url'); ?>#contact">CONTACT</a></li>
        </ul>
      </div>
    </div>
    
    <div class="content1"></div>
    <div class="content2">
      <div class="slideshow">
        <div class="btn next"></div>
        <div class="btn prev"></div>
        
        <div class="container">
          <div class="pic-container">
        
          <?php 
            $args = array(
            'numberposts'     => -1,
            'offset'          => 0,
            'category'        => 3,
            'post_status'     => 'publish' );
            
            $posts = get_posts($args);
            $count = 1;
            
            $total_pages = ceil(count($posts)/10);
            $lost_posts = ($total_pages*10)-count($posts);
            
            foreach($posts as $post){
              $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
            
              // for opening tag html
              if($count == 1){
                // $count = 0;
                echo '<div class="page">';
              }
              ?>
              <div class="img">
                <a href="<?php echo $feat_image; ?>" title="<?php echo $post->post_content; ?>">
                  <img src="<?php echo $feat_image; ?>" alt="<?php echo $post->post_content; ?>" />
                </a>
              </div>
              <?php
              // for closing tag html
              if($count >= 10){
                echo '</div>';
                $count = 1;
              }else{
                $count++;
              }
            }
            
            // for lost post
            for($a=1;$a<=$lost_posts;$a++){
            ?>
            <div class="img no-img">
              <img src="<?php bloginfo('template_url') ?>/images/no-image.png" alt="" />
            </div>
            <?php
              if($a == $lost_posts){
                echo '</div>';
              }
            }
          ?>
          
          </div>
        </div>
      </div>
      
      <h2>IMAGE GALLERY</h2>
      <p class="page_numbers">Halaman <span></span></p>
    </div>
    <div class="caption"></div>
    
    <div id="footer">Copyright 2012  PT. Asia Putra Cemerlang.  design by visualcast designology</div>
  </div>
</div>

<?php get_footer(); ?>